<script>
		$(document).ready(function(e) {
        	$("#newemp").click(function(){
				$("#fr_opr").load("action/NewReservation.php");		
			});
			$("#editemp").click(function(){
				$("#fr_opr").load("action/NewReservation.php");		
			});
    	});		
	</script>
           
            <h1 class="page-title">Employees</h1>
<div class="btn-toolbar">
    <button class="btn btn-primary" id="newemp"><i class="icon-plus"></i> New Reservation</button>
    <!--<button class="btn">Import</button>
    <button class="btn">Export</button>-->
  <div class="btn-group">
  </div>
</div>

<div class="well">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Guest</th>
          <th>Room</th>
          <th>DateIn</th>
          <th>DateOut</th>
          <th>Detail</th>
          <th style="width: 26px;"></th>
        </tr>
      </thead>
      <tbody>
      <?PHP 
			 require_once("connection.php");
			 $rec_limit = 10;
			
			$query = "SELECT r.`res_id`,r.`date_in`,r.`date_out`,r.`notes`,ro.`room_no`,g.`guest_name` 
							FROM `reservation_tbl` r
								INNER JOIN guest_tbl g ON g.`guest_id`=r.`guest_id`
								INNER JOIN room_tbl ro ON r.room_id=ro.`room_id`"; 
			$result = mysql_query($query);	
			while($row = mysql_fetch_array($result, MYSQL_NUM )){
		 ?>
        <tr>       
        	         
          <td><?php echo $row['res_id']; ?></td>
          <td><?php echo $row['guest_name']; ?></td>
          <td><?php echo $row['room_no']; ?></td>
          <td><?php echo $row['date_in']; ?></td>
          <td><?php echo $row['date_out']; ?></td>
          <td><?php echo $row['notes']; ?></td>
          <td>
              <a href="#" id="editemp"><i class="icon-pencil"></i></a>
              <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a>
          </td>
          
        </tr>
        <?php } ?>
        
      </tbody>
    </table>
</div>
<div class="pagination">
    <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</div>